<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="css/element-ui/index.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>


<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column label="操作">

                <template slot-scope="scope">
                    <!-- {{scope.row.src}}
                    {{scope.$index}} -->
                    <el-link @click="log(scope.$index,scope.row)"><i class="el-icon-view el-icon--right"> </i> 查看</el-link>
                    <el-link @click="collect(scope.$index,scope.row)"><i class="el-icon-view el-icon-star-on"></i>收藏
                    </el-link>

                </template>

            </el-table-column>
        </el-table>

    </div>





</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- 引入组件库 -->
<!-- <script src="js/element-ui/index.js"></script> -->
<!-- <script src="js/vue.js"></script> -->

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                authentication: "",
                baseSrc: "https://view.officeapps.live.com/op/view.aspx?src=",
                tableData: [],

            }
        },
        created() {
            //获取token字符串
            var url = window.location.href
            var authentication = "authentication="
            idx = url.indexOf(authentication)
            if (idx != -1) {
                this.authentication = url.substring(idx + authentication.length);
            }
            console.log(this.authentication)


            // 获取列表json
            axios.get('https://qianicloud.cn/red/dataList.json')
                .then(res => {
                    this.tableData = res.data
                    console.log(res.data)
                    console.log(typeof(res.data))
                })


        },

        methods: {
            log(index, row) {
                axios.post('https://qianicloud.cn/api/log/add', {
                        userName: this.authentication,
                        logName: '课件在线查看-' + row.name,
                    }, {
                        headers: {
                            token: this.authentication
                        }
                    })
                    .then(res => {
                        console.log(this.baseSrc + row.src)
                        window.location.replace(this.baseSrc + row.src)

                    })
                    //跳转

            },
            collect(index, row) {
                //收藏
                console.log(index, row)
                axios.post('https://qianicloud.cn/api/collect/add', {
                        userName: this.authentication,
                        collectItemName: row.name,
                        collectItemAddr: row.src
                    }, {
                        headers: {
                            token: this.authentication
                        }
                    })
                    .then(res => {
                        if (res.data.code === "200") {
                            this.$message({
                                type: "success",
                                "message": "收藏成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                "message": "收藏失败，重复项"
                            })
                        }
                    })

                // 本地
                // axios.post('http://localhost:9090/collect/add', {
                //         userName: this.authentication,
                //         collectItemName: row.name,
                //         collectItemAddr: row.src
                //     }, {
                //         headers: {
                //             token: this.authentication
                //         }
                //     })
                //     .then(res => {
                //         console.log(res.data.code)
                //         if (res.data.code === "200") {
                //             this.$message({
                //                 type: "success",
                //                 "message": "收藏成功"
                //             })
                //         } else {
                //             this.$message({
                //                 type: "error",
                //                 "message": "收藏失败，重复项"
                //             })
                //         }
                //     })
            }
        }

    })
</script>

</html>